<template>
	<div class="account-follow flex items-center h-[90px] py-4 bg-bg-3 rounded-lg">
		<div class="flex-1 text-center">
			<div class="text-t-3 mb-[10px]">{{ $t('profile.registerTime') }}</div>
			<div class="h-5">{{ fmtDate(userInfo?.registerTime || Date.now()) }}</div>
		</div>
		<div class="w-[1px] h-full m-0 bg-border-1" />
		<div class="flex-1 text-center cursor-pointer" @click="showFollow(FollowShowType.following)">
			<div class="text-t-3 mb-[10px]">{{ $t('account.following') }}</div>
			<div class="h-5">{{ fmtNum(userInfo?.followCount) }}</div>
		</div>
		<div class="w-[1px] h-full m-0 bg-border-1" />
		<div class="flex-1 text-center cursor-pointer" @click="showFollow(FollowShowType.follow)">
			<div class="text-t-3 mb-[10px]">{{ $t('account.follower') }}</div>
			<div class="h-5">{{ fmtNum(userInfo?.fanCount) }}</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { UserInfo } from '@/types'
import { useFollowStore } from '@/store'
import { FollowShowType } from '@/types'
import { fmtDate, fmtNum } from '@/utils'

const followStore = useFollowStore()
const props = defineProps({
	userInfo: {
		type: [Object, null] as PropType<UserInfo | null>,
		default: () => ({})
	}
})

const showFollow = (type: FollowShowType) => {
	followStore.showFollow({
		type,
		show: true,
		userId: props.userInfo?.userId,
		userName: props.userInfo?.userName,
		nickName: props.userInfo?.nickName
	})
}
</script>
